<template>
	<div class="page-content">
		<div class="page-title">请选择是否佩戴眼镜
		<div class="page-timer"><Timer  title="选择是否佩戴眼镜"></Timer></div> 
		</div>
		<div style="height: 824px;display: flex;justify-content: center;align-items: flex-start;margin-top: 160px;" @mousedown="clickCarType">
			<button class="btn1" data-card="佩戴" style="margin-right: 48px;"></button>
			<button class="btn2" data-card="不佩戴" style="margin-left: 48px;"></button>
		</div>
	</div>
</template>

<script>
	export default{
		data(){
			return{
				carTypes:'',
				buttons:[],
			}
		},
		methods:{
			clickCarType(event){
				let btn = event.target;
				if(btn.tagName.toLowerCase() != 'button')
					btn = event.target.parentElement;
				
				if(btn.tagName.toLowerCase() != 'button')
					return;
				
				this.buttons.forEach((button)=>{
					button.classList.remove('active');
				})
				this.buttons.length = 0;
				btn.classList.add('active');
				this.buttons.push(btn);
				let num = btn.getAttribute('data-card');
				if(num){
					this.carTypes = num;
					console.log("选择: " + num);
				} 
			},
		}
	}
</script>

<style scoped="scoped">
	.btn1{
		height: 330px;width: 250px;border-radius: 20px;
		background: url(../../../public/res/sight/佩戴.png);
		border: none;
	}
	.btn1.active{
		height: 330px;width: 250px;border-radius: 20px;
		background: url(../../../public/res/sight/佩戴按下.png);
		border: none;
	}
	.btn2{
		height: 330px;width: 250px;border-radius: 20px;
		background: url(../../../public/res/sight/不佩戴.png);
		border: none;
	}
	.btn2.active{
		height: 330px;width: 250px;border-radius: 20px;
		background: url(../../../public/res/sight/不佩戴按下.png);
		border: none;
	}
</style>
